<template>
  <div class="guideline-container">
    <!-- 页面标题 -->
    <div class="guideline-header">
      <h2 class="guideline-title">康复指南</h2>
      <p class="guideline-subtitle">获取专业的康复指导和建议</p>
    </div>

    <div class="guideline-content">
      <!-- tab 切换，全部指南/未读指南/已读指南 -->
      <t-tabs v-model="tabValue" class="guideline-tabs">
        <t-tab-panel v-for="tab in TAB_LIST" :key="tab.value" :value="tab.value" :label="tab.label">
          <!-- tab内容区域 -->
        </t-tab-panel>
      </t-tabs>

      <!-- 骨架屏：加载中显示 -->
      <div v-if="loading" class="guideline-loading">
        <t-skeleton
          :row-col="[
            { type: 'text', width: '60%', height: '24px' },
            { type: 'text', width: '40%', height: '16px' },
            { type: 'text', width: '80%', height: '24px' },
            { type: 'text', width: '50%', height: '16px' },
            { type: 'text', width: '70%', height: '24px' },
            { type: 'text', width: '30%', height: '16px' },
          ]"
          animation="flashed"
        />
      </div>

      <!-- 指南列表  -->
      <div v-else-if="guideList.length > 0" class="guideline-list">
        <div v-for="item in guideList" :key="item.id" class="guideline-card" @click="goDetail(item.id, item.isRead)">
          <div class="card-content">
            <!-- 封面图片区域 -->
            <div class="card-cover">
              <img
                :src="item.imgUrl || '/src/assets/assets-empty.svg'"
                :alt="item.title"
                class="cover-image"
                @error="handleImageError"
              />
            </div>

            <!-- 卡片信息区域 -->
            <div class="card-info">
              <div class="card-header">
                <h3 class="card-title">{{ item.title }}</h3>
                <div class="card-status">
                  <t-tag v-if="item.isRead === 0" theme="warning" size="small">未读</t-tag>
                  <t-tag v-else theme="success" size="small">已读</t-tag>
                </div>
              </div>
              <div class="card-meta">
                <div class="meta-item">
                  <t-icon name="time" size="16" />
                  <span>{{ formatRelativeTime(item.createTime) }}</span>
                </div>
                <div class="meta-item">
                  <t-icon name="file" size="16" />
                  <span>{{ item.categoryName || '康复指南' }}</span>
                </div>
              </div>
            </div>

            <!-- 右侧箭头 -->
            <div class="card-arrow">
              <t-icon name="chevron-right" size="20" />
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="guideline-empty">
        <div class="empty-icon">
          <t-icon name="file" size="48" />
        </div>
        <h3 class="empty-title">暂无指南</h3>
        <p class="empty-desc">当前没有可用的康复指南</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入依赖
import { getGuideList } from '@/api/guide';
import type { GuideResponse } from '@/api/model/guideModel';
import { DEFAULT_PAGINATION } from '@/constants'; // 导入全局分页配置
import { formatRelativeTime } from '@/utils/date';
import { onActivated, ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; // 添加 useRoute

defineOptions({ name: 'GuideLine' });
// tab 配置
const TAB_LIST = [
  { label: '未读指南', value: 'unread' },
  { label: '已读指南', value: 'read' },
  { label: '全部指南', value: 'all' },
];

// 分页配置
const pagination = ref({ ...DEFAULT_PAGINATION });
const guideList = ref<GuideResponse[]>([]); // 指南数据，添加正确的类型定义
const loading = ref(true); // 骨架屏加载状态

const router = useRouter();
const route = useRoute(); // 获取路由实例

// 直接用 URL 参数初始化 tabValue，如果没有就用默认值
const tabFromUrl = (route.query.tab as string) || 'unread'; // 从路由参数获取tab值，没有则用默认值
const tabValue = ref(
  TAB_LIST.some((tab) => tab.value === tabFromUrl) ? tabFromUrl : 'unread', //如果tab值有效就用，否则用默认
);

// 跳转到详情页
const goDetail = (id: number, isRead: number) => {
  router.push({
    name: 'GuideDetail',
    query: {
      id,
      isRead,
      from: 'guideline', // 标记来源页面
      tab: tabValue.value, // 传递当前tab值
    },
  });
};

// 处理图片加载错误
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement;
  // 中文注释：设置默认图片
  target.src = '/src/assets/assets-empty.svg';
};

// 获取指南列表
const fetchGuideList = async () => {
  loading.value = true; // 开始加载，显示骨架屏
  try {
    // 根据当前 tab 值确定 isRead 参数
    let isRead: number | null;
    if (tabValue.value === 'unread') {
      isRead = 0; // 未读
    } else if (tabValue.value === 'read') {
      isRead = 1; // 已读
    } else {
      isRead = null; // 全部
    }

    const res = await getGuideList({ isRead, pageNum: pagination.value.current, pageSize: pagination.value.pageSize });
    guideList.value = res.data.data?.records || [];
  } finally {
    loading.value = false; // 加载结束，隐藏骨架屏
  }
};

onActivated(() => {
  console.log('onActivated');
  fetchGuideList(); // 只保留获取数据的调用
});
watch(tabValue, fetchGuideList);
</script>

<style lang="less" scoped>
.guideline-container {
  padding: 32px;
  background: var(--td-bg-color-secondarycontainer);
  min-height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
}

.guideline-header {
  margin-bottom: 32px;
  text-align: center;
  .guideline-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--td-text-color-primary);
    margin: 0 0 12px 0;
  }
  .guideline-subtitle {
    font-size: 16px;
    color: var(--td-text-color-secondary);
    margin: 0;
  }
}

.guideline-content {
  background: var(--td-bg-color-container);
  border-radius: var(--td-radius-large);
  box-shadow: var(--td-shadow-1);
  overflow: hidden;
}

.guideline-tabs {
  :deep(.t-tabs__nav) {
    background: var(--td-bg-color-secondarycontainer);
    border-bottom: 1px solid var(--td-border-level-1-color);
    padding: 0 24px;
  }
  :deep(.t-tabs__nav-item) {
    font-weight: 500;
    font-size: 15px;
    padding: 16px 24px;
  }
  :deep(.t-tabs__nav-item--active) {
    color: var(--td-brand-color);
    font-weight: 600;
  }
}

.guideline-loading {
  padding: 40px 24px;
}

.guideline-list {
  padding: 24px 0;
}

.guideline-card {
  margin: 0 24px 20px;
  background: var(--td-bg-color-container);
  border: 1px solid var(--td-border-level-1-color);
  border-radius: var(--td-radius-medium);
  cursor: pointer;
  transition: all 0.3s ease;
  &:hover {
    border-color: var(--td-brand-color);
    box-shadow: var(--td-shadow-2);
    transform: translateY(-3px);
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.card-content {
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-cover {
  width: 120px;
  height: 80px;
  overflow: hidden;
  border-radius: var(--td-radius-medium);
  flex-shrink: 0;
  box-shadow: var(--td-shadow-1);
  .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
}

.card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 80px;
  padding-right: 20px;
}

.card-header {
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--td-text-color-primary);
  margin: 0;
  line-height: 1.4;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-status {
  flex-shrink: 0;
}

.card-meta {
  display: flex;
  gap: 24px;
  margin-top: auto;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--td-text-color-secondary);
  .t-icon {
    color: var(--td-text-color-placeholder);
  }
}

.card-arrow {
  color: var(--td-text-color-placeholder);
  transition: color 0.3s ease;
  flex-shrink: 0;
  margin-left: auto;
  font-size: 24px;
}

.guideline-card:hover .card-arrow {
  color: var(--td-brand-color);
}

.guideline-card:hover .cover-image {
  transform: scale(1.08);
}

.guideline-empty {
  padding: 80px 24px;
  text-align: center;
  .empty-icon {
    color: var(--td-text-color-placeholder);
    margin-bottom: 24px;
    font-size: 64px;
  }
  .empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--td-text-color-primary);
    margin: 0 0 12px 0;
  }
  .empty-desc {
    font-size: 16px;
    color: var(--td-text-color-secondary);
    margin: 0;
    line-height: 1.5;
  }
}
</style>
